<template>
  <div>
    <el-group-title class="ccui-group-wrapper d_jump" index="contract">
      <template slot="groupTitle">
        <el-form
          :model="form"
          :rules="rules"
          ref="form2"
          label-width="160px"
          class="ccui-form"
          style="overflow: visible"
        >
          <div class="extend-btn" v-show="!isDisabled">
            <el-upload
              multiple
              :show-file-list="false"
              :action="uploadUrl"
              class="upload-demo tow"
              :before-upload="beforeAvatarUpload"
              :on-success="onSuccess"
              :on-error="onError"
              :on-progress="onProgress"
              :headers="headers"
              ref="uploadItem"
            >
              <el-button plain type="single-number">上传附件 </el-button>
            </el-upload>
          </div>
          <el-table
            :data="tableData"
            style="margin-bottom: 20px; width: 100%"
            border
            max-height="99999"
            class="ccui-form-child-table"
          >
            <el-table-column
              :show-overflow-tooltip="true"
              label="序号"
              type="index"
              min-width="20%"
              height="36px"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="fileName"
              label="附件名称"
              min-width="100%"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="fileSize"
              label="附件大小"
              min-width="60%"
            >
            </el-table-column>

            <el-table-column
              :show-overflow-tooltip="true"
              label="附件说明"
              min-width="70%"
            >
              <template slot-scope="scope">
                <span v-if="isDisabled">{{ scope.row.fileExplain }}</span>
                <el-input
                  v-else
                  placeholder="请输入附件说明"
                  maxlength="100"
                  v-model="scope.row.fileExplain"
                />
              </template>
            </el-table-column>

            <el-table-column
              :show-overflow-tooltip="true"
              prop="createTime"
              label="上传时间"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="scaleNum"
              label="操作"
              align="left"
              appendixInfor.vue
              min-width="70%"
            >
              <template slot-scope="scope">
                <span
                  v-show="!isDisabled"
                  style="color: #0089ef; cursor: pointer; margin-right: 10px"
                  @click="deleteAppend(scope.$index)"
                  >删除</span
                >
                <span
                  style="color: #0089ef; cursor: pointer"
                  v-show="isDisabled"
                  @click="download(scope.$index, scope.row)"
                  >下载</span
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </template>
    </el-group-title>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { addUrlPerFix } from "@/basa/utils";
import { showLoading } from "@/basa/utils/public";

export default {
  name: "attachment",
  props: {
    tableDataList: Array,
    isDisabled: Boolean,
  },
  watch: {
    tableDataList: {
      handler(newVal) {
        if (newVal.length > 0) {
          newVal.map((item) => {
            item.fileName = item.aptitudeName
              ? item.aptitudeName
              : item.fileName;
            item.fileSize = Math.round(item.fileSize / 1024) + "kb";
          });
          this.tableData = JSON.parse(JSON.stringify(newVal));
        }

        // 把数据发送给父组件
        this.$emit("attachmentSucessData", this.tableData);
      },
    },
    tableData: {
      handler(newVal) {
        // 把数据发送给父组件
        console.log(newVal, "哈哈哈");
        if (newVal) this.$emit("attachmentSucessData", newVal);
      },
      deep: true,
    },
  },
  data() {
    return {
      form: {
        fileName: "", //合同附件里的文件名称
        fileSize: "", //合同附件里的文件大小
        fileExplain: "",
        createTime: "", // 合同附件里的上传时间
        fileArr: [], // 入参
      },
      uploadLoading: null,
      rules: {},
      tableData: [],
      uploadUrl: addUrlPerFix(process.env.VUE_APP_UPLOAD_URL), //上传图片
      headers: {
        Authorization: Cookies.get("access_token") || "",
      },
    };
  },
  activated() {
    // 初始化附件
    this.tableData = [];
  },
  mounted() {
    if (this.tableDataList.length > 0) {
      this.tableDataList.map((item) => {
        item.fileName = item.aptitudeName;
        item.fileSize = Math.round(item.fileSize / 1024) + "kb";
      });
      this.tableData = JSON.parse(JSON.stringify(this.tableDataList));
    }
  },
  methods: {
    onSuccess(res) {
      console.log(res, "附件上传成功");
      this.$message.success("附件上传成功");
      this.uploadLoading.close();
      let fileData = res.data[0];

      console.log(fileData.fileSize);
      // 展示的附件列表
      this.tableData.push({
        uploadId: fileData.uploadId,
        fileName: fileData.fileName,
        fileSize: Math.round(fileData.fileSize / 1024) + "kb",
        createTime: fileData.createTime,
        fileExplain: "",
      });
      // 记录一下附件id数组
      this.form.fileArr = [];
      this.tableData.forEach((item) => {
        this.form.fileArr.push(item.uploadId);
      });
      console.log(this.tableData, "数据条数");
      // 把数据发送给父组件
      this.$emit("attachmentSucessData", this.tableData);
    },
    onError({ message }) {
      this.$message.error("附件上传失败");
      this.uploadLoading.close();
    },
    beforeAvatarUpload(file) {
      const isLt50 = file.size < 52428800;
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension =
        testmsg === "xlsx" ||
        testmsg === "xls" ||
        testmsg === "doc" ||
        testmsg === "docx" ||
        testmsg === "ppt" ||
        testmsg === "pptx" ||
        testmsg === "pdf" ||
        testmsg === "jpg" ||
        testmsg === "png" ||
        testmsg === "txt" ||
        testmsg === "rft" ||
        testmsg === "msg" ||
        testmsg === "wps" ||
        testmsg === "et" ||
        testmsg === "dps" ||
        testmsg === "vsd" ||
        testmsg === "prn" ||
        testmsg === "ai" ||
        testmsg === "cad" ||
        testmsg === "JPG" ||
        testmsg === "PNG" ||
        testmsg === "PDF" ||
        testmsg === "tiff" ||
        testmsg === "TIFF" ||
        testmsg === "swf" ||
        testmsg === "SWF" ||
        testmsg === "bmp" ||
        testmsg === "gif" ||
        testmsg === "jpeg" ||
        testmsg === "jpe" ||
        testmsg === "rar" ||
        testmsg === "RAR" ||
        testmsg === "zip" ||
        testmsg === "7z" ||
        testmsg === "lzh" ||
        testmsg === "LZH";
      if (!isLt50) {
        this.$showErrorMessage("文件大小不可超过50M！");
      }
      if (!extension) {
        this.$showErrorMessage("上传文件格式错误！");
      }
      return isLt50 && extension;
    },
    deleteAppend(index) {
      this.tableData.splice(index, 1);
      this.$refs.uploadItem.uploadFiles.splice(index, 1);
      this.form.fileArr = [];
      this.tableData.forEach((item) => {
        this.form.fileArr.push(item.uploadId);
      });

      console.log(this.tableData, "数据条数");
      // 把数据发送给父组件
      this.$emit("attachmentSucessData", this.tableData);
    },
    download(i, r) {
      window.open(
        `${addUrlPerFix(
          process.env.VUE_APP_BASE_URL
        )}/apis/smp/oss/downloadByUploadId?uploadId=${r.uploadId}`
      );
    },
    onProgress(event, file, fileList) {
      this.uploadLoading = showLoading("上传中");
    },
  },
};
</script>
<style scoped lang="scss">
// .extend-btn {
//   left: 940px;
// }
/deep/ .el-table {
  /deep/ th {
    padding: 0;
    height: 36px;
    line-height: 36px;
  }

  .el-table__body {
    .cell {
      height: 36px;
      line-height: 36px;
    }
  }
}
</style>
